<template>
  <div class="pr-24 py-24 bd-filt-6 bgc-lightgrey">
    <el-form-item label="位置尺寸" class="mb-24">
      <LayoutSetting v-model="model" />
    </el-form-item>
    <el-form-item label="不透明度" class="mb-24">
      <OpacitySetting v-model="style" />
    </el-form-item>
    <el-form-item label="基金代码" class="mb-24" :rules="notEmptyRules" :prop="`componentData.${index}.config.fundId`">
      <el-input v-model="config.fundId" maxlength="6" @input="updateFundInfo({ rename: true })"></el-input>
    </el-form-item>
    <el-form-item label="涨跌幅类型" class="mb-24">
      <el-select v-model="config.fundType" @change="updateFundInfo">
        <el-option v-for="item in FUND_UP_DOWN_TYPE" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="数据颜色" class="mb-24">
      <ColorSetting v-model="style.color" />
    </el-form-item>
    <el-form-item label="数据样式" class="mb-24">
      <FontStyleSetting v-model="style" />
    </el-form-item>
    <el-form-item label="说明显示" class="mb-24">
      <el-switch v-model="config.hasDesc"></el-switch>
    </el-form-item>
    <div v-show="config.hasDesc">
      <el-form-item label="说明颜色" class="mb-24">
        <ColorSetting v-model="config.descStyle.color" />
      </el-form-item>
      <el-form-item label="说明样式" class="mb-24">
        <FontStyleSetting v-model="config.descStyle" :double="false" />
      </el-form-item>
    </div>
    <JumpSetting v-model="config" />
  </div>
</template>

<script>
  import { notEmptyRules } from '@/utils';
  import { FUND_UP_DOWN_TYPE } from '@/constants';
  import LayoutSetting from '@/views/productEdit/components/settingComponent/LayoutSetting';
  import OpacitySetting from '@/views/productEdit/components/settingComponent/OpacitySetting';
  import ColorSetting from '@/views/productEdit/components/settingComponent/ColorSetting';
  import FontStyleSetting from '@/views/productEdit/components/settingComponent/FontStyleSetting';
  import JumpSetting from '@/views/productEdit/components/settingComponent/JumpSetting';

  export default {
    components: { LayoutSetting, OpacitySetting, ColorSetting, FontStyleSetting, JumpSetting },

    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      },
      index: {
        type: [Number, String],
        default: undefined
      }
    },

    data() {
      return {
        notEmptyRules,
        FUND_UP_DOWN_TYPE
      };
    },

    computed: {
      config() {
        return this.model.config;
      },
      style() {
        return this.model.style;
      }
    },

    created() {
      if (this.config.fundId) this.updateFundInfo({ rename: true });
    },

    methods: {
      // 编辑fundId实时更新表单
      updateFundInfo({ rename }) {
        if (!/^\d{6}$/.test(this.config.fundId)) {
          this.model.data.updownState = 1;
          this.model.data.updownValue = `00.00`;
          return;
        }
        this.$http
          .queryFundInfo({
            type: this.config.fundType,
            fundId: this.config.fundId
          })
          .then((res) => {
            if (!res.data) {
              this.model.data.updownState = 1;
              this.model.data.updownValue = '00.00';
              return;
            }
            const { numerical, type, fundName } = res.data;
            this.model.data.updownState = type;
            this.model.data.updownValue = `${type === 0 ? '-' : '+'}${numerical.toFixed(2)}`;
            if (fundName && rename) this.config.title = fundName;
          });
      }
    }
  };
</script>

<style lang="scss" scoped></style>
